<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import {
  orderQueryApi,
  goodsAllocatedApi,
  goodsDeliveredApi,
  cancelOrderApi
} from '@/apis/order'
import { formatDate } from '@/utils/dateUtils'
const prop = defineProps({
  status: {
    type: Number,
    default: 100
  }
})
const emit = defineEmits(['update:status'])
const router = useRouter()
const params = ref({
  pageNo: 1,
  pageSize: 10,
  orderNo: '',
  orderStatus: prop.status,
  startTime: null,
  endTime: null
})

const dateValue = ref([])
const handlerDate = () => {
  if (dateValue.value && dateValue.value.length === 2) {
    params.value.startTime = formatDate(dateValue.value[0])
    params.value.endTime = formatDate(dateValue.value[1])
  }
}

const clearDate = () => {
  params.value.startTime = null
  params.value.endTime = null
  dateValue.value = []
  gettableData()
}

// 时间快捷选项
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    }
  }
]
const total = ref(0)
const tableData = ref([])
// 获取表格数据
const gettableData = async () => {
  if (!params.value.orderStatus) {
    params.value.orderStatus = 100
  }
  const res = await orderQueryApi(params.value)
  tableData.value = res.data.data.list
  total.value = res.data.data.total
}
gettableData()

// 搜索
const handlerSearch = () => {
  params.value.pageNo = 1
  gettableData()
}
// 重置表单
const reSetForm = () => {
  params.value.orderNo = ''
  params.value.startTime = null
  params.value.endTime = null
  dateValue.value = []
  gettableData()
}

// 切换页
const currentChange = (e) => {
  params.value.pageNo = e
  gettableData()
}
// 切换页大小
const sizeChange = (e) => {
  params.value.pageSize = e
  params.value.pageNo = 1
  gettableData()
}

// 配货
const goodsAllocated = async (row) => {
  await goodsAllocatedApi(row.id)
  ElMessage({
    type: 'success',
    message: '操作成功'
  })
  emit('update:status')
  params.value.pageNo = 1
  gettableData()
}

// 出库
const goodsDelivered = async (row) => {
  await goodsDeliveredApi(row.id)
  params.value.pageNo = 1
  emit('update:status')
  gettableData()
}

// 弹层控制
const dialogVisible = ref(false)
const openDialog = (row) => {
  cancelForm.value.extraInfo = ''
  dialogVisible.value = true
  cancelForm.value.id = row.id
}
const cancelForm = ref({
  id: null,
  extraInfo: ''
})

// 取消
const cancelOrder = async () => {
  if (!cancelForm.value.extraInfo) {
    ElMessage({
      type: 'warning',
      message: '请输入取消原因'
    })
    return
  }
  await cancelOrderApi(cancelForm.value)
  ElMessage({
    type: 'success',
    message: '操作成功'
  })
  emit('update:status')
  params.value.pageNo = 1
  dialogVisible.value = false
  gettableData()
}

// 详情
const toDetails = (row) => {
  router.push(`/model/details/${row.orderNo}?tab=${prop.status}`)
}
</script>

<template>
  <div class="content">
    <div class="search-box">
      <el-form :inline="true">
        <el-form-item label="订单号">
          <el-input
            v-model="params.orderNo"
            autocomplete="off"
            clearable
            style="width: 16rem"
          />
        </el-form-item>
        <el-form-item label="订单号">
          <el-date-picker
            v-model="dateValue"
            type="datetimerange"
            :shortcuts="shortcuts"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handlerDate"
            format="YYYY-MM-DD"
            @clear="clearDate"
          />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 5rem" type="primary" @click="handlerSearch"
            >搜索</el-button
          >
          <el-button style="width: 5rem" @click="reSetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <el-table height="480" :data="tableData" style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="240" />
        <el-table-column prop="totalPrice" label="订单总价" min-width="120">
          <template #default="{ row: { totalPrice } }">
            <div style="color: red">￥{{ totalPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态">
          <template #default="{ row: { orderStatus } }">
            <div v-if="orderStatus === 1" style="color: #32cd32">已支付</div>
            <div v-else-if="orderStatus === 2" style="color: #1e90ff">
              配货完成
            </div>
            <div v-if="orderStatus === 3" style="color: #ff69b4">出库成功</div>
            <div v-if="orderStatus === 4" style="color: #8a2be2">交易成功</div>
            <div v-else-if="orderStatus === -1" style="color: #ea3322">
              手动关闭
            </div>
            <div v-else-if="orderStatus === -2" style="color: #ea3322">
              超时关闭
            </div>
            <div v-else-if="orderStatus === -3" style="color: #ea3322">
              商家关闭
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="payType" label="支付方式">
          <template #default="scope">
            <div v-if="scope.row.payType === 0" style="color: #000">无</div>
            <div v-else-if="scope.row.payType === 1" style="color: #56afef">
              支付宝
            </div>
            <div v-else-if="scope.row.payType === 2" style="color: #5fc157">
              微信
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="150"
          v-if="prop.status === 200 || prop.status === 100"
          prop="extraInfo"
          label="取消原因"
        />
        <el-table-column prop="updateTime" label="更新时间" min-width="180" />
        <el-table-column label="操作" min-width="180">
          <template #default="{ row }">
            <el-popconfirm
              title="确定配货吗？"
              v-if="row.orderStatus === 1"
              @confirm="goodsAllocated(row)"
            >
              <template #reference>
                <el-button link type="warning" size="small"> 配货 </el-button>
              </template>
            </el-popconfirm>

            <el-popconfirm
              title="确定出库吗？"
              v-if="row.orderStatus === 2"
              @confirm="goodsDelivered(row)"
            >
              <template #reference>
                <el-button link type="warning" size="small"> 出库 </el-button>
              </template>
            </el-popconfirm>

            <el-button link type="primary" size="small" @click="toDetails(row)"
              >订单详情</el-button
            >

            <el-button
              v-if="row.orderStatus !== 4 && row.orderStatus > 0"
              link
              type="danger"
              size="small"
              @click="openDialog(row)"
            >
              取消订单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-box">
      <el-pagination
        v-show="total > 0"
        background
        layout="sizes,prev, pager, next,total"
        :total="total"
        :page-sizes="[2, 10, 15, 20]"
        v-model:page-size="params.pageSize"
        v-model:current-page="params.pageNo"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>

    <!-- 弹层 -->
    <el-dialog
      :center="true"
      v-model="dialogVisible"
      :align-center="true"
      width="500"
    >
      <template #header>
        <div style="margin-bottom: 20px; font-size: 20px; font-weight: 600">
          取消原因
        </div>
      </template>
      <div class="dialog-box">
        <el-form>
          <el-form-item label="取消原因：">
            <el-input
              type="textarea"
              resize="none"
              :rows="4"
              placeholder="请输入内容"
              v-model="cancelForm.extraInfo"
              style="width: 18rem"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" size="large" @click="cancelOrder">
            确定
          </el-button>
          <el-button size="large" @click="dialogVisible = false"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-box {
  display: flex;
  font-size: 0.9rem;

  .item {
    margin-left: 1rem;
  }
}

.table-box {
  margin-top: 1rem;
  border-top: 1px solid #ccc;
}

.page-box {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
}
</style>
